<template>
  <div>
    <PageTitleSearch
      :title="title"
      :hotelList="hotelList"
      :currentHotel="currentHotel"
      v-model:lastMonth="lastMonth"
      :currentAcc="currentAcc"
      @hotel-change="handleSelectChange"
      @date-change="handleDateSelect"
      @acc-change="handleAccSelect"
    />
    <div class="main-content">
      <a-row>
        <a-col>
          <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
            <a-col :span="2" style="width: 55px; flex: 0 0 55px">
              <div class="title-name"></div>
            </a-col>
            <a-col :span="23" style="flex: 1">
              <a-row :gutter="12">
                <a-col :span="4"><div class="title-name title-bold">餐厅其他小计</div></a-col>
                <a-col :span="4">
                  <div class="title-name">其他餐厅</div>
                </a-col>
                <a-col :span="4"><div class="title-name">送餐</div></a-col>
                <a-col :span="4"><div class="title-name">大堂酒吧</div></a-col>
                <a-col :span="4"><div class="title-name">其他酒吧</div></a-col>
                <a-col :span="4"><div class="title-name">客房小酒吧</div></a-col>
              </a-row>
            </a-col>
          </a-row>

          <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
            <a-col :span="2" style="width: 55px; flex: 0 0 55px">
              <div class="title-name col-title">
                <h2 class="vercial-mode">收入</h2>
                <p>（万元）</p>
              </div>
            </a-col>
            <a-col :span="23" style="flex: 1">
              <a-row :gutter="12">
                <a-col :span="4">
                  <FlexCard class="custom-card" :loading="loading" :dataList="priceDataAll">
                    <BarSingleImg
                      v-if="priceDataAll && priceDataAll.length > 0"
                      :dataList="priceDataAll"
                      formatter="dot2Formatter|0"
                      :showComment="false"
                      :barWidth="25"
                      height="190px"
                    />
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" :loading="loading" :dataList="priceDataBussiness">
                    <BarSingleImg
                      v-if="priceDataBussiness && priceDataBussiness.length > 0"
                      :dataList="priceDataBussiness"
                      formatter="dot2Formatter|0"
                      :showComment="false"
                      :barWidth="25"
                    />
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="priceDataResort">
                    <BarSingleImg
                      v-if="priceDataResort && priceDataResort.length > 0"
                      :dataList="priceDataResort"
                      formatter="dot2Formatter|0"
                      :showComment="false"
                      :barWidth="25"
                    />
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="priceDataLobbyBar">
                    <template v-if="priceDataLobbyBar && priceDataLobbyBar.length > 0">
                      <BarSingleImg :dataList="priceDataLobbyBar" unit="万元" formatter="dot2Formatter|0" :showComment="false" :barWidth="25" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="priceDataOtherBar">
                    <template v-if="priceDataOtherBar && priceDataOtherBar.length > 0">
                      <BarSingleImg :dataList="priceDataOtherBar" unit="万元" formatter="dot2Formatter|0" :showComment="false" :barWidth="25" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="priceDataMiniBar" s>
                    <template v-if="priceDataMiniBar && priceDataMiniBar.length > 0">
                      <BarSingleImg :dataList="priceDataMiniBar" unit="万元" formatter="dot2Formatter|0" :showComment="false" :barWidth="25" />
                    </template>
                  </FlexCard>
                </a-col>
              </a-row>
            </a-col>
          </a-row>

          <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
            <a-col :span="2" style="width: 55px; flex: 0 0 55px">
              <div class="title-name col-title">
                <h2 class="vercial-mode">经营利润</h2>
                <p>（万元）</p>
              </div>
            </a-col>
            <a-col :span="23" style="flex: 1">
              <a-row :gutter="12">
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="perDataAll">
                    <template v-if="perDataAll.length > 0">
                      <BarSingleImg
                        :dataList="perDataAll"
                        unit="万元"
                        formatter="dot2Formatter|0"
                        :showComment="false"
                        :barWidth="25"
                        height="220px"
                      />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="perDataBussiness">
                    <template v-if="perDataBussiness.length > 0">
                      <BarSingleImg :dataList="perDataBussiness" unit="万元" formatter="dot2Formatter|0" :showComment="false" :barWidth="25" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="perDataResort">
                    <template v-if="perDataResort.length > 0">
                      <BarSingleImg :dataList="perDataResort" unit="万元" formatter="dot2Formatter|0" :showComment="false" :barWidth="25" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="perDataLobbyBar">
                    <template v-if="perDataLobbyBar.length > 0">
                      <BarSingleImg :dataList="perDataLobbyBar" unit="万元" formatter="dot2Formatter|0" :showComment="false" :barWidth="25" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="perDataOtherBar">
                    <template v-if="perDataOtherBar.length > 0">
                      <BarSingleImg :dataList="perDataOtherBar" unit="万元" formatter="dot2Formatter|0" :showComment="false" :barWidth="25" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="perDataMiniBar">
                    <template v-if="perDataMiniBar.length > 0">
                      <BarSingleImg :dataList="perDataMiniBar" unit="万元" formatter="dot2Formatter|0" :showComment="false" :barWidth="25" />
                    </template>
                  </FlexCard>
                </a-col>
              </a-row>
            </a-col>
          </a-row>

          <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
            <a-col :span="2" style="width: 55px; flex: 0 0 55px">
              <div class="title-name col-title">
                <h2 class="vercial-mode">利润率</h2>
                <p>（万元）</p>
              </div>
            </a-col>
            <a-col :span="23" style="flex: 1">
              <a-row :gutter="12">
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="rentRateDataAll">
                    <template v-if="rentRateDataAll && rentRateDataAll.some((item) => item.value !== 0)">
                      <RingImg :centerPoint="['40%', '70%']" :dataList="rentRateDataAll" :borderRadius="10" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="rentRateDataBussiness">
                    <template v-if="rentRateDataBussiness && rentRateDataBussiness.some((item) => item.value !== 0)">
                      <RingImg :centerPoint="['40%', '70%']" :dataList="rentRateDataBussiness" :borderRadius="10" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="rentRateDataResort">
                    <template v-if="rentRateDataResort && rentRateDataResort.some((item) => item.value !== 0)">
                      <RingImg :centerPoint="['40%', '70%']" :dataList="rentRateDataResort" :borderRadius="10" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="rentRateDataLobbyBar">
                    <template v-if="rentRateDataLobbyBar && rentRateDataLobbyBar.some((item) => item.value !== 0)">
                      <RingImg :centerPoint="['40%', '70%']" :dataList="rentRateDataLobbyBar" :borderRadius="10" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="rentRateDataOtherBar">
                    <template v-if="rentRateDataOtherBar && rentRateDataOtherBar.some((item) => item.value !== 0)">
                      <RingImg :centerPoint="['40%', '70%']" :dataList="rentRateDataOtherBar" :borderRadius="10" />
                    </template>
                  </FlexCard>
                </a-col>
                <a-col :span="4">
                  <FlexCard class="custom-card" title="" :loading="loading" :dataList="rentRateDataMiniBar">
                    <template v-if="rentRateDataMiniBar && rentRateDataMiniBar.some((item) => item.value !== 0)">
                      <RingImg :centerPoint="['40%', '70%']" :dataList="rentRateDataMiniBar" :borderRadius="10" />
                    </template>
                  </FlexCard>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <ReportRemarkCard
        class="custom-card remark-card"
        :loading="loading"
        v-if="reportCode"
        title="说明"
        :reportCode="reportCode"
        :reportName="reportName"
      />
    </div>
  </div>
</template>

<script>
  import dayjs from 'dayjs';
  import { defHttp } from '/@/utils/http/axios';
  import * as MathUtil from '/@/utils/MathUtil';
  import * as Color from '/@/utils/ColorDefault';
  import FlexCard from '@/views/applications/ui/FlexCard.vue';
  import ReportRemarkCard from '@/views/applications/ui/ReportRemarkCard.vue';
  import RingImg from '@/views/applications/ui/RingImg.vue';
  import BarSingleImg from '@/views/applications/ui/BarSingleImg.vue';
  import PageTitleSearch from '@/views/applications/ui/PageTitleSearch.vue';

  const REPORT_NAME = '餐厅其他收入情况';
  const REPORT_CODE = 'hotel-month-restother';
  const INCOME_APIS = {
    month: 'getHotelMonthRestOther',
    year: 'getHotelMonthAccRestOther',
  };

  export default {
    name: REPORT_NAME,

    components: {
      FlexCard,
      RingImg,
      ReportRemarkCard,
      BarSingleImg,
      PageTitleSearch,
    },

    data() {
      return {
        title: '餐饮部分-其他餐厅',
        reportCode: '',
        reportName: '',
        loading: false,
        lastMonth: dayjs().subtract(1, 'month').format('YYYYMM'),
        accList: [
          { label: '当月', value: 'month' },
          { label: '当年', value: 'year' },
        ],
        currentHotelCodes: '',
        currentAcc: 'month',

        rentRateDataLobbyBar: [],
        rentRateDataOtherBar: [],
        rentRateDataMiniBar: [],

        priceDataLobbyBar: [],
        priceDataOtherBar: [],
        priceDataMiniBar: [],

        perDataLobbyBar: [],
        perDataOtherBar: [],
        perDataMiniBar: [],
        hotelList: [],
        currentHotel: {
          code: '',
          name: '',
        },
        priceDataAll: [],
        priceDataBussiness: [],
        priceDataResort: [],
        perDataAll: [],
        perDataBussiness: [],
        perDataResort: [],
        rentRateDataAll: [],
        rentRateDataBussiness: [],
        rentRateDataResort: [],
      };
    },

    created() {
      defHttp.get({ url: '/data/hotel/list' }, { isTransformResponse: false }).then((res) => {
        if (res.success && res.result.length > 0) {
          const dataList = res.result;
          this.hotelList = dataList.map((item) => ({
            label: item.name,
            value: item.code,
          }));
          if (this.hotelList.length > 0) {
            this.currentHotel = {
              code: this.hotelList[0].value,
              name: this.hotelList[0].label,
            };
          }
          this.currentHotelCodes = dataList.map((s) => s.code).join(',');
          const accName = this.accList.filter((a) => a.value === this.currentAcc)[0].label;
          this.reportCode = `${REPORT_CODE}-${this.currentAcc}-${this.lastMonth}`;
          this.reportName = `${REPORT_NAME}-${accName}-${this.lastMonth}`;
          this.fetchData();
        }
      });
    },

    methods: {
      handleDateSelect(date) {
        this.lastMonth = date;
        const accName = this.accList.find((a) => a.value === this.currentAcc).label;
        this.reportCode = `${REPORT_CODE}-${this.currentAcc}-${this.lastMonth}`;
        this.reportName = `${REPORT_NAME}-${accName}-${this.lastMonth}`;
        this.fetchData();
      },

      handleAccSelect(value) {
        this.currentAcc = value;
        const accName = this.accList.find((a) => a.value === value).label;
        this.reportCode = `${REPORT_CODE}-${value}-${this.lastMonth}`;
        this.reportName = `${REPORT_NAME}-${accName}-${this.lastMonth}`;
        this.fetchData();
      },

      isMonthDisabled(current) {
        const lastMonth = dayjs().subtract(1, 'month').endOf('month');
        return current && current > lastMonth;
      },

      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },

      handleSelectChange(value) {
        this.currentHotel = {
          code: value,
          name: this.hotelList.find((h) => h.value === value).label,
        };
        this.fetchData();
      },

      fetchData() {
        this.loading = true;
        // let codes = 'H0026,H0006,H0009,H0004,H0008,H0003,H0007,H0014,H0013,H0017,H0002,H0005,H0018,H0015,H0022,H0019,H0023,H0010,H0027,H0028,H0029,H0033,H0032,H0030'
        defHttp
          .post({
            url: '/data/query',
            data: {
              labelCode: INCOME_APIS[this.currentAcc],
              sqlParams: [
                { key: 'code', value: this.currentHotelCodes },
                { key: 'month', value: this.lastMonth },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          })
          .then((res) => {
            console.log('res', res);

            const dataList = res.datas.success ? res.datas.data : [];
            console.log('dataList', dataList);

            if (dataList.length === 0) {
              this.clearAllData();
            } else {
              // 收入数据
              const otherRestaurant = this.getDataByCode(dataList, '01020104');
              const roomService = this.getDataByCode(dataList, '01020105');
              const lobbyBar = this.getDataByCode(dataList, '01020106');
              const otherBar = this.getDataByCode(dataList, '01020107');
              const miniBar = this.getDataByCode(dataList, '01020108');

              // 经营利润数据
              const otherRestaurantProfit = this.getDataByCode(dataList, '03020104');
              const roomServiceProfit = this.getDataByCode(dataList, '03020105');
              const lobbyBarProfit = this.getDataByCode(dataList, '03020106');
              const otherBarProfit = this.getDataByCode(dataList, '03020107');
              const miniBarProfit = this.getDataByCode(dataList, '03020108');

              // 设置收入数据
              this.priceDataAll = this.formatChartData(this.sumData([otherRestaurant, roomService, lobbyBar, otherBar, miniBar]));
              this.priceDataBussiness = this.formatChartData(otherRestaurant);
              this.priceDataResort = this.formatChartData(roomService);
              this.priceDataLobbyBar = this.formatChartData(lobbyBar);
              this.priceDataOtherBar = this.formatChartData(otherBar);
              this.priceDataMiniBar = this.formatChartData(miniBar);

              // 设置经营利润数据
              this.perDataAll = this.formatChartData(
                this.sumData([otherRestaurantProfit, roomServiceProfit, lobbyBarProfit, otherBarProfit, miniBarProfit])
              );
              this.perDataBussiness = this.formatChartData(otherRestaurantProfit);
              this.perDataResort = this.formatChartData(roomServiceProfit);
              this.perDataLobbyBar = this.formatChartData(lobbyBarProfit);
              this.perDataOtherBar = this.formatChartData(otherBarProfit);
              this.perDataMiniBar = this.formatChartData(miniBarProfit);

              // 设置利润率数据
              this.rentRateDataAll = this.formatRateData(
                this.sumData([otherRestaurantProfit, roomServiceProfit, lobbyBarProfit, otherBarProfit, miniBarProfit]),
                this.sumData([otherRestaurant, roomService, lobbyBar, otherBar, miniBar])
              );
              this.rentRateDataBussiness = this.formatRateData(otherRestaurantProfit, otherRestaurant);
              this.rentRateDataResort = this.formatRateData(roomServiceProfit, roomService);
              this.rentRateDataLobbyBar = this.formatRateData(lobbyBarProfit, lobbyBar);
              this.rentRateDataOtherBar = this.formatRateData(otherBarProfit, otherBar);
              this.rentRateDataMiniBar = this.formatRateData(miniBarProfit, miniBar);
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },

      clearAllData() {
        this.rentRateDataAll = [];
        this.rentRateDataBussiness = [];
        this.rentRateDataResort = [];
        this.rentRateDataLobbyBar = [];
        this.rentRateDataOtherBar = [];
        this.rentRateDataMiniBar = [];
        this.priceDataAll = [];
        this.priceDataBussiness = [];
        this.priceDataResort = [];
        this.priceDataLobbyBar = [];
        this.priceDataOtherBar = [];
        this.priceDataMiniBar = [];
        this.perDataAll = [];
        this.perDataBussiness = [];
        this.perDataResort = [];
        this.perDataLobbyBar = [];
        this.perDataOtherBar = [];
        this.perDataMiniBar = [];
      },

      getDataByCode(dataList, code) {
        return (
          dataList.find((item) => item.subjectCode === code) || {
            actual: 0,
            budget: 0,
            lActual: 0,
          }
        );
      },

      formatChartData(data) {
        return [
          {
            name: this.currentAcc === 'month' ? '当月' : '年累计',
            value: MathUtil.currencyWNDFormatter(data.actual, 2),
            color: Color.COLOR_BLUE,
          },
          {
            name: '预算',
            value: MathUtil.currencyWNDFormatter(data.budget, 2),
            color: Color.COLOR_PURPLE,
          },
          {
            name: '去年',
            value: MathUtil.currencyWNDFormatter(data.lActual, 2),
            color: Color.COLOR_WARN,
          },
        ];
      },

      formatRateData(profitData, incomeData) {
        // 直接使用原始数据计算利润率，不需要先转换为万元
        return [
          {
            name: '去年',
            value: MathUtil.safeDivide(profitData.lActual, incomeData.lActual),
            color: Color.COLOR_WARN,
            radius: ['70%', '85%'], // 最外圈 - 去年
          },
          {
            name: '预算',
            value: MathUtil.safeDivide(profitData.budget, incomeData.budget),
            color: Color.COLOR_PURPLE,
            radius: ['55%', '70%'], // 中间圈 - 预算
          },
          {
            name: this.currentAcc === 'month' ? '当月' : '年累计',
            value: MathUtil.safeDivide(profitData.actual, incomeData.actual),
            color: Color.COLOR_BLUE,
            radius: ['40%', '55%'], // 最内圈 - 实际
          },
        ];
      },

      sumData(dataArray) {
        return {
          actual: dataArray.reduce((sum, item) => sum + item.actual, 0),
          budget: dataArray.reduce((sum, item) => sum + item.budget, 0),
          lActual: dataArray.reduce((sum, item) => sum + item.lActual, 0),
        };
      },

      safeDivide(numerator, denominator) {
        return MathUtil.safeDivide(numerator, denominator);
      },
      dot2Formatter(value, dot = 2) {
        return MathUtil.dot2Formatter(value, dot);
      },
    },
  };
</script>

<style lang="less" scoped>
  @media @desktop {
    .row-content {
      display: flex;
    }

    .main-content {
      padding: 12px 0;

      &-title {
        &-custom {
          color: #00b578;
        }
      }
    }

    .card-flex-all {
      flex: 1 1 calc(100% - 10px);
    }
    .card-flex {
      flex: 1 1 calc(50% - 10px);
    }
    .card-flex-70 {
      flex: 1 1 calc(66% - 10px);
    }
    .card-flex-30 {
      flex: 1 1 calc(33% - 10px);
    }
    .card-flex-60 {
      flex: 1 1 calc(60% - 10px);
    }
    .card-flex-40 {
      flex: 1 1 calc(40% - 10px);
    }

    .card-in-flex {
      display: flex;
    }

    .echarts {
      width: 100%;
      height: 220px;
    }

    .card-in-flex-30 {
      flex: 1;
    }

    .card-in-flex-70 {
      flex: 2;
    }

    .row-left {
      flex: 4;
    }
    .row-right {
      flex: 1;
    }
    .flex-height {
      height: 96%;
    }

    .custom-card {
      margin: 0px;
      height: 252px;
      display: flex;
      flex-direction: column;
      background: #fff;
    }

    .no-data {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #211515;
      background: #f5f5f5;
      height: 100%;
      border-radius: 4px;
    }

    .title-name {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      background: #ffffff;
      box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
      border-radius: 0.5rem;
      text-align: center;
      font-size: 16px;
    }

    .title-bold {
      font-weight: 600;
    }

    .vercial-mode {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      letter-spacing: 8px; /* 调整字符间距 */
    }

    .col-title {
      height: 252px;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
      border-radius: 0.5rem;
      // padding: 16px;

      h2 {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        margin-bottom: 12px;

        &.vercial-mode {
          writing-mode: vertical-rl;
          text-orientation: mixed;
          line-height: 1.5;
        }
      }

      p {
        font-size: 10px;
        margin: 0;
        color: #000;
        text-align: center;
        font-weight: 500;
      }
    }

    .remark-height {
      height: 1066px;
    }
  }
</style>
